```vue
<template>
  <div class="page">
    <div class="wrap">
      <!-- 左侧插图（约 62% 宽） -->
      <section class="left">

        <img class="illustration" src="@/assets/images/login.png" alt="illustration" />
      </section>

      <!-- 右侧登录卡片（约 38% 宽） -->
      <section class="right">
        <div class="card">
          <div class="tabs">
            <button
                class="tab"
                :class="{ active: role === 'student' }"
                @click="role = 'student'"
            >教师</button>
            <button
                class="tab"
                :class="{ active: role === 'teacher' }"
                @click="role = 'teacher'"
            >管理员</button>

          </div>

          <div class="subtabs">
            <button
                class="subtab"
                :class="{ on: method === 'quick' }"
                @click="method = 'quick'"
            >快捷登录</button>
            <button
                class="subtab"
                :class="{ on: method === 'pwd' }"
                @click="method = 'pwd'"
            >密码登录</button>
          </div>

          <div class="form">
            <div v-if="method === 'quick'">
              <div class="field phone">
                <span class="prefix">+86</span>
                <input v-model="phone" type="tel" placeholder="请输入手机号" />
              </div>

              <div class="field">
                <input v-model="code" type="text" placeholder="请输入短信验证码" />
                <button class="ghost" :disabled="left>0" @click="sendCode">
                  {{ left>0 ? `${left}s` : '获取短信验证码' }}
                </button>
              </div>
            </div>

            <div v-else>
              <div class="field">
                <input v-model="user" type="text" placeholder="请输入账号/学号" />
              </div>
              <div class="field">
                <input v-model="pwd" type="password" placeholder="请输入密码" />
              </div>
            </div>

            <button class="primary" @click="login">登录</button>

            <div class="helper">
              忘记密码？<router-link to="find">立即重置</router-link>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const role = ref('student')
const method = ref('quick')

const phone = ref('')
const code = ref('')
const user = ref('')
const pwd = ref('')
const left = ref(0)
let timer

const sendCode = () => {
  if (!phone.value) return alert('请输入手机号')
  left.value = 60
  clearInterval(timer)
  timer = setInterval(() => {
    left.value--
    if (left.value <= 0) clearInterval(timer)
  }, 1000)
}

const login = () => {
  // 不管输入什么都能进入首页
  console.log('login', { role: role.value, method: method.value, phone: phone.value, user: user.value })
  // 使用Vue Router跳转到首页
  router.push('/home')
}
</script>

<style scoped>
/* 整页背景 */
.page{
  min-height:100vh;
  background:
      radial-gradient(600px 300px at 85% 8%, rgba(120,120,255,.08), transparent 60%),
      radial-gradient(560px 260px at 8% 92%, rgba(120,120,255,.08), transparent 60%),
      #eef3ff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  box-sizing:border-box;
}

/* 布局容器：宽度与图片比例接近稿件（左62% / 右38%） */
.wrap{
  width:min(1280px, 96vw);
  display:grid;
  grid-template-columns: 62fr 38fr; /* 比例控制 */
  gap:24px;
  align-items:center;
}

/* 左侧 */
.left{
  position:relative;
  display: flex;
  justify-content:flex-end;  /* 让图片靠右对齐 */
  padding-right: 40px;  /* 增加右边距，让图片更靠右 */
}

.brand{
  position:absolute;
  top:8px;
  left:8px;
  z-index:2;
}
.brand-logo{
  height:36px;
  object-fit:contain;
}

.illustration{
  justify-content: flex-end;
  width: 710px;  /* 设置固定宽度，让图片变瘦 */
  height: 500px;  /* 设置固定高度，比右侧卡片稍高 */
  object-fit: cover;  /* 保持图片比例，裁剪多余部分 */
  display:block;
  border-radius:8px;
}

/* 右侧 */
.right{ display:flex;
  justify-content:flex-start; }

.card{
  height: 450px;
  width: 420px;               /* 减少卡片宽度，让卡片变瘦 */
  background:#fff;
  border-radius:12px;
  box-shadow:0 18px 40px rgba(0,0,0,.08);
  padding:18px 24px 24px;
}

/* 顶部 tab */
.tabs {
  display: flex;
  margin-bottom: 30px;
  border-bottom: 1px solid #e0e0e0;
}
.tab{
  flex:1;
  height:40px;
  border:none;
  background:white;
  color:#666;
  border-radius:8px 8px 0 0;
  cursor:pointer;
}
.tab.active{
  color:white;
  box-shadow:0 -2px 0 0 #c9c9ef inset;
  background:#c7b8ff;
}

/* 子 tab */
.subtabs{
  display:flex;
  gap:12px;
  padding:6px 0 18px;
  border-bottom:1px solid #eef0f5;
  margin-bottom:16px;
}
.subtab{
  border:none;
  background:transparent;
  color:#666;
  cursor:pointer;
  position:relative;
  padding:4px 2px;
}
.subtab.on{ color:#6b4fd8; }
.subtab.on::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:-8px;
  height:2px; background:#6b4fd8;
}

/* 表单 */
.form{ padding-top:10px; }

.field{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.field input{
  flex:1;
  height:44px;
  border:1px solid #e6e7ef;
  border-radius:10px;
  padding:0 14px;
  outline:none;
  background:#fff;
  transition:border-color .2s, box-shadow .2s;
}
.field input:focus{
  border-color:#b7c3ff;
  box-shadow:0 0 0 3px rgba(91,123,255,.15);
}
.field .ghost{
  height:44px;
  padding:0 14px;
  border:1px solid #e6e7ef;
  background:#f7f8ff;
  color:#444;
  border-radius:10px;
  cursor:pointer;
  white-space:nowrap;
}
.field .ghost:disabled{ color:#aaa; cursor:not-allowed; }

.field.phone .prefix{
  background:#f6f7fb;
  border:1px solid #e6e7ef;
  border-right:none;
  height:44px;
  padding:0 14px;
  border-radius:10px 0 0 10px;
  display:inline-flex;
  align-items:center;
  color:#6b6ef1;
}

/* 按钮 */
.primary{
  width:100%;
  height:50px;
  border:none;
  border-radius:10px;
  background:#8e78e6;
  color:#fff;
  font-size:16px;
  letter-spacing:4px;
  cursor:pointer;
  margin-top:6px;
}

/* 辅助链接 */
.helper{
  text-align:center;
  margin-top:14px;
  color:#777;
  font-size:14px;
}
.helper a{ color:#6b4fd8; text-decoration:none; }

/* 响应式 */
@media (max-width: 1024px){
  .wrap{ grid-template-columns: 1fr; }
  .card{ width:min(420px, 94vw); margin:0 auto; }  /* 调整移动端卡片宽度 */
  .illustration{ height: 400px; width: 500px; }  /* 移动端调整图片尺寸 */
}
</style>
```